<template>
    <div id="app">
       
        <div v-if="source==='recommand'" id="daily_recommand">
            <div class="recommand_backboard">
                <div class="recommand_header">
                    <div class="recommand_subtitle">说本地话，融入当地生活</div>
                    <div class="recommand_date" v-html=today></div>
                </div>

                <div class="recommand_title">精选推荐</div>
                <div class="recommand_body">
                    <div :class="{bkstyle:is_bkstyle_show}"></div>
                   <div class="recommand_item" v-for="item,key in top5" :key="key">
                        <div v-if="item.tags!=undefined" class="recommand_tags"><span class="recommand_feture">词条特色：</span><el-tag v-for="tag in split_recommend_tags(item.tags)">{{tag}}</el-tag></div>
                        <div class="recommand_origntext">{{item.originText}}</div>
                        <div class="target" @click="readit(item.pronunciation_url)">
                            <div class="voicebutton">
                                <span>
                                    <font-awesome-icon :icon="['fas', 'volume-off']" style="color:#4473d2" />
                                </span>
                            </div>
                            <div class="targettext">{{item.targetText}}</div>
                        </div>
                        <div class="recommand_userprofile">
                            <span class="contributer_name">贡献者：</span>
                            <img class="contributer_avatar" :src="item.avatar"/>
                            <span class="contributer_name">{{item.contributer}}</span>
                        </div>
                   </div>
                </div>

                <div class="recommand_more"><el-button class="morebutton" plain @click="goHome(pcode)">更多有趣内容</el-button></div>
                <audio ref="audio" @ended="audioEnded"></audio>
            </div>
        </div>

        <div v-else id="promotion">
            <div class="backboard">
                <div class="slogan">有趣儿的口语词典</div>
                <div class="subtitle">说本地话，融入当地生活</div>
                <div class="contentboard">
                    <div class="keyword">{{keywords}}</div>
                    <div class="origntext"><span v-html="emphersizeLetter(originText,keywords)"></span></div>
                    <div class="target" @click="readit(pronunciation_url)">
                        <div class="voicebutton">
                            <span>
                                <font-awesome-icon :icon="['fas', 'volume-off']" style="color:#4473d2" />
                            </span>
                        </div>
                        <div class="targettext">{{targetText}}</div>
                    </div>

                    <div class="userprofile">
                        <span class="contributer_name">贡献者：</span>
                        <img class="contributer_avatar" :src="avatar"/>
                        <span class="contributer_name">{{contributer}}</span>
                    </div>
                </div>
                <div class="more"><el-button class="morebutton" plain @click="goHome(pcode)">更多有趣内容</el-button></div>
            </div>
            <audio ref="audio" @ended="audioEnded"></audio>
        </div>

    </div>
        <FooterPage style="margin:40dvh 40dvw "></FooterPage>
    
</template>
     
    <script>
    import FooterPage from '@/components/FooterPage.vue'
    import { ElNotification,ElTable,ElTableColumn,ElPagination,ElMessage, ElMessageBox } from 'element-plus';
    import { ref, watch } from 'vue';
    import config from '../../spoken.config.json';
    import axios from 'axios';
    import { getMonthDays } from 'element-plus/es/components/calendar/src/date-table';
   

     export default{
         name:'H5promotion',
         components:{
            FooterPage,
            ElTable,ElTableColumn,ElPagination,
        },
       
         data(){
             return{
                    // h5Data:{},
                    top5:{},
                    tags:null,
                    is_bkstyle_show:false,
                    today:null,
                    source:null,
                    bid:null,
                    pcode:null,
                    keywords:null,
                    originText:null,
                    targetText:null,
                    contributer:null,
                    pronunciation_url:null,
                    recommand_backimage:"../assets/h5sharebackground.png",
                    avatar:'https://sam-test.oss-cn-beijing.aliyuncs.com/assets/default-avatar.png',
                };
         },

         watch:{
                    //监听数据变化
                    // h5Data:{
                    //         //数据变化的时候会自动调用handler函数，并自动填充newData参数
                    //         handler(newData){
                    //             this.keywords=newData.keywords
                    //             this.originText=newData.originText
                    //             this.targetText=newData.targetText
                    //             this.pronunciation_url=newData.pronunciation_url
                    //             this.contributer=newData.contributer
                    //             this.avatar=newData.avatar
                    //         },
                    //         deep:true, // 深度监听对象内部属性的变化
                    //     },
                },
                
         created(){
            console.log(this.$route.query)
            this.getday();
            this.source= this.$route.query.source
            this.pcode=this.$route.query.pcode
            this.bid=this.$route.query.bid
            this.render_page(this.source);
            this.is_bkstyle_show=true
         },
       
         mounted(){
         },

        methods:{

            split_recommend_tags(tags){
                try{
                    let res=tags.split('/')
                return res
                }catch{;}
                
            },

            getday(){
                const dateobj=new Date()    
                this.today=dateobj.getFullYear()+"/"+(dateobj.getMonth()+1)+"/"+dateobj.getDate()+" <br/>今天是：星期 "+dateobj.getDay()
            },

            emphersizeLetter(words,letter){
                try{
                    console.log("emphersizeLetter函数入参检查：words="+words+" letter="+letter)
                    var regex = new RegExp(letter, 'gi');  
                    const emphersize_str= words.replace(regex, '<font color="#4473d2"><b>' + letter + '</b></font>'); 
                    console.log("高亮文字："+emphersize_str)
                    return emphersize_str
                    }catch(error){
                        console.log(error)
                    }
                },

            readit(url){
                try{
                    this.$refs.audio.load();
                    console.log("朗读地址："+url)
                    this.$refs.audio.src=url;
                    this.$refs.audio.play();
                    
                }catch(error){
                    console.log(error);
                }
            },

            //播放完成清空audio src
            audioEnded(){
            console.log("audioEnded !");
            this.$refs.audio.src='';
            this.$refs.audio.load();
            },

            render_page(source){
                if(source=='share'){
                //调用接口分享数据
                const data={"bid":this.bid}
                axios.post("/api/get_share_data/", data, { withCredentials: true })
                .then(response => {
                try {
                        if (response.data["code"] == 20000) {
                            console.log("从render_page拿到的返回值是："+JSON.stringify(response.data["data"]))
                            const res=response.data["data"]
                            this.keywords=res.keywords
                            this.originText=res.originText
                            this.targetText=res.targetText
                            this.pronunciation_url=res.pronunciation_url
                            this.contributer=res.contributer
                            this.avatar=res.avatar
                            
                        }else{
                            ElNotification({
                            message: response.data["msg"],
                            title: response.data["code"],
                            type:"warning",
                            duration: 3000,
                        });
                        }   
                    }
                    catch (error) {
                        console.log(error);
                    }
                });
            }else{
                   //调用推荐数据接口
                   axios.get("/api/get_recommendation/",{ withCredentials: true })
                .then(response => {
                try {
                        if (response.data["code"] == 20000) {
                            console.log("从render_page拿到的返回值是："+JSON.stringify(response.data["data"]))
                            this.top5=response.data["data"]
                            // const res=response.data["data"]
                            // this.keywords=res.keywords
                            // this.originText=res.originText
                            // this.targetText=res.targetText
                            // this.pronunciation_url=res.pronunciation_url
                            // this.contributer=res.contributer
                            // this.avatar=res.avatar
                            
                        }else{
                            ElNotification({
                            message: response.data["msg"],
                            title: response.data["code"],
                            type:"warning",
                            duration: 3000,
                        });
                        }   
                    }
                    catch (error) {
                        console.log(error);
                    }
                });
                }
            },

        goHome(pcode){
            if(pcode!==null){
                window.open(config.promotion_link+'?rcode='+pcode)
            }else{
                window.open(config.promotion_link+'?rcode=')
            }
        },

        },
    }  
     </script>
     
     <style scoped>

    /********************每日推荐页样式****************************/

     div#daily_recommand{
        display:flex;
        justify-content: center; 
     }
    div.recommand_backboard{
        height:100%;
        background:#9dbee1;
        border-radius: 8px;
        padding: 10px 20px;
        width: 535px;
    }
    div.recommand_header{
        display: flex;
        justify-content: space-between;
        margin-top: 30px;;
    }
    div.recommand_subtitle{
        position: relative;
        left:0;
    }
    div.recommand_date{
        display: flex;
        justify-content: space-between;
    }

    div.recommand_body{
        display: flex;
        flex-direction: column;
    }

    div.recommand_tags{
        display: flex;
        justify-content: start;
        margin:10px 0 0 10px
    }
   
    div.recommand_title{
        display: block;
        margin-top: 20px;
        color: #000;
        font-size:xx-large;
        font-weight: 700;
        text-align: left;
        margin-left: 20px;
    }
    div.recommand_origntext{
        display:flex;
        justify-content: start; 
        text-align: left;
        padding:12px 15px 0 30px;
        font-family:Arial, Helvetica, sans-serif ;
        overflow-wrap:normal; 
    }
    div.recommand_userprofile{
        position: relative;
        top: 20%;
        display: flex;
        justify-self: start;
        padding-left: 30px;
        padding-top: 10px;
        border-bottom: 1px dashed #666 ; 
    }

    span.recommand_feture{
        font-size: 14px;
        margin-left:10px;
        color:#c16503;
    }
    div.recommand_item{
        background: #fdfdfd2d;
        margin-bottom: 5px;
    }
    div.recommand_more{
       margin: 30px 0;
    }
    div.bkstyle{
        background-image: url("../assets/h5sharebackground.png");
        background-repeat:no-repeat;
        height: 250px;
        border: 5px solid #fff;
        border-radius: 6px;
        margin: 30px 0;
    }
        

     /********************分享落地页样式****************************/

     div#promotion{
       display:flex;
       justify-content: center;
     }
        div.backboard{
            position: relative;
            background-image: url("../assets/h5sharebackground.png");
            background-repeat: no-repeat;
            width: 534px;
            height: 800px;
           
        }

        div.slogan{
            margin-top:95px;
            color:#fff;
            font-weight: 600;
            font-size:46px;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
        div.subtitle{
            display: flex;
            justify-content: end;
            margin-top:20px;
            margin-right: 60px;
            color:#fff;
            font-weight: 400;
            font-size:20px; 
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
        div.contentboard{
            width: 440px;
            height:430px;
            background-color: #b7cae0;
            border-radius: 8px;
            position: relative;   
            top: 50%;  
            left: 50%;  
            transform: translate(-50%, -80%);  
        }
        div.keyword{
            padding-top: 55px;
            display:flex;
            justify-content: start; 
            padding-left:30px;
            font-family:Arial, Helvetica, sans-serif ;
            font-size:30px ;
            font-weight: 600;
        }
        div.origntext{
            display:flex;
            justify-content: start; 
            text-align: left;
            padding:28px 15px 0 30px;
            font-family:Arial, Helvetica, sans-serif ;
            font-size:24px ;
            font-weight: 400;
            overflow-wrap:normal; 
        }
        div.target{
            padding-top: 28px;
            display:flex;
            justify-content: start; 
            padding-left:30px;
            padding-right:15px ;
            position: relative; 
            text-align: left;
        }
        div.target:hover{
            cursor:pointer;
        }
        div.targettext{
            padding-left: 10px;
           
        }
        div.userprofile{
            position: relative;
            bottom: -40%;
            display: flex;
            justify-self: start;
            padding-left: 30px;
            padding-top: 10px;
            border-top: 1px dashed #666 ;
        }
        
        span.contributer_name{
            font-family: 'Times New Roman', Times, serif;
            padding-top: 5px;
        }

        img.contributer_avatar{
          width:30px;
          height: 30px;  
          object-fit: cover;
          margin: 0 10px 0 0;
          border-radius: 15px;;
        }
        .more{
            width: auto;
            height:50px;
            border-radius: 8px;
            position: relative;   
            top: 10%;  
            left: 50%;  
            transform: translate(-50%, 0%);   
            
        }
        .morebutton{
            width: 300px;
            height:50px;
            background-color: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.3);
            color:#fff;
            font-size:17px ;
            border-radius: 4px;
        }

        .morebutton:hover{
            width: 300px;
            height:50px;
            background-color: rgba(255, 255, 255, 0.8);
            border-color: rgba(255, 255, 255, 0.3);
            color:#136ed5;
            font-size:17px ;
            border-radius: 4px;
        }
   
     </style>